<template>
    <view class="allDataP" >

    <Echartdd @func="getMsgFormSon" @funcs="getMsgFormSons"  ></Echartdd>

    <!-- <u-loading size="36">
    123321312
    </u-loading> -->



    <view class="infoP" >

     <view class="infoP-top">
     <view :style="{width:'5rem', textAlign:'center' }" >
     <view class="infoP-text" >
     本月收益
     </view>
     <view class="infoP-text-number" >{{monthAndWeek.monthEarningsSum}}</view>
  </view>

  <view :style="{width:'5rem', textAlign:'center' }" >
     <view class="infoP-text" >
     本月订单额
     </view>
     <view class="infoP-text-number" >{{monthAndWeek.monthOrderSum}}</view>
  </view>
  </view>
  <view :style="{ background:'#eeeeee', width:'100%', height:'0.05rem' }">
  </view>
   <view class="infoP-bottom">
     <view :style="{width:'5rem', textAlign:'center' }"  >
    <view class="infoP-text" >
     本周收益
     </view>
     <view class="infoP-text-number" >{{monthAndWeek.weekEarningsSum}}</view>
  </view>
  
  <view :style="{width:'5rem' , textAlign:'center'}"  >
     <view class="infoP-text" >
     本周订单额
     </view>
     <view class="infoP-text-number" >{{monthAndWeek.weekOrderSum}}</view>
  </view>

     
  </view>


    </view>


     <view class="infoP" >

  <view class="stati-title"  > 
   <view>设备统计</view>
   <!-- <image style="width: 0.5rem;
height: 0.5rem;" src="../../style/image/stati/A32.png" alt=""> -->
  </view>

  <view class="stati-content-title" >
  <view>设备型号</view>
  <view>底座数量</view>
  <view>充电宝数</view>
  </view>
  <view class="stati-content">
    <view class="stati-content-item"  :class="{ 'bor':0<=index&&staticList.length-2}" v-for="(item,index) in staticList" :key="index"  >
     <view style="font-weight: 400;" >{{item.modelsName}}1</view>
     <view  style="font-weight: 300;font-family: PingFang SC;" >{{item.pedestalsCount}}</view>
     <view  style="font-weight: 300;font-family: PingFang SC;"  >{{item.powerBankCount}}</view>
    </view>
  </view>

    </view>
       <!-- <h1>123231123</h1>
       <h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1>
       <h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1>
       <h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1>
       <h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>123231123</h1>
       <h1>123231123</h1><h1>123231123</h1><h1>123231123</h1><h1>88888</h1> -->


    </view>
  
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

// import Echarts from '@/eCharts/components/echarts/echarts.vue'
// import EchartsEl from '@/eCharts/components/echarts/echarts-el.vue'

import Echartdd from "./chart.vue";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
  components: {
    Echartdd,
    // Echart,
    // EchartsEl
  },
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public chartSettings = {
    // axisSite: { right: ['下单率'] },
    yAxisType: ["KMB", "percent"],
    area: true,
    yAxisName: ["数值", "比率"],
  };
  public chartData = {
    columns: ["本月", "上月", "本周", "上周"],
    rows: [
      { 本月: "1/1", 上月: 1393, 本周: 1093, 上周: 0.32 },
      { 本月: "1/2", 上月: 3530, 本周: 3230, 上周: 0.26 },
      { 本月: "1/3", 上月: 2923, 本周: 2623, 上周: 0.76 },
      { 本月: "1/4", 上月: 1723, 本周: 1423, 上周: 0.49 },
      { 本月: "1/5", 上月: 3792, 本周: 3492, 上周: 0.323 },
      { 本月: "1/6", 上月: 4593, 本周: 4293, 上周: 0.78 },
    ],
  };
  public monthAndWeek = {
    monthEarningsSum: "", // 月收益
    monthOrderSum: "", //月订单合计
    weekEarningsSum: "", //周收益
    weekOrderSum: "", //周订单合计
  };
  public staticList = [
    {
      type: "UC800",
      num: "1",
      pnum: "5",
    },
    {
      type: "UC800",
      num: "1",
      pnum: "5",
    },
    {
      type: "UC800",
      num: "1",
      pnum: "5",
    },
    {
      type: "UC800",
      num: "1",
      pnum: "5",
    },
  ];

  created() {}

  mounted() {

    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }
  
  onHide(){
  	  uni.hideLoading();
  }


  childM(){

    console.log(999999999)

  }

 


  getMsgFormSon(data: any) {
    console.log("子组件的数据", data);
    this.staticList = data;
  }
  getMsgFormSons(data: any) {
    console.log("子组件的数据", data);
    this.monthAndWeek = data;
  }
   onPullDownRefresh() {

    console.log("refresh---total");

    // setTimeout(function () {
    //   uni.redirectTo({
    //     url: "../../pages/stati/index",
    //   });
    //   uni.stopPullDownRefresh();
    // }, 1000);
    
  }
}
</script>

<style  lang="scss"  scoped>
.allDataP {
  padding: 1rem;
  background-color: white;
}
.infoP {
  box-shadow: 0rem 0rem 0.5rem 0rem rgba(102, 102, 102, 0.17);
  border-radius: 0.2rem;
  margin-bottom: 2rem;
}

.infoP-top {
  display: flex;
  justify-content: space-around;
  padding: 1rem;
}
.infoP-bottom {
  display: flex;
  justify-content: space-around;
  padding: 1rem;
}

.infoP-text {
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 390;
  color: #000000;
}

.infoP-text-number {
  font-size: 0.9rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #02af74;
}
.stati-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
}

.stati-content-title {
  display: flex;
  margin: 0.5rem 1rem;
}
.stati-content-title > view {
  width: 33.3%;
  text-align: center;

  font-size: 0.8rem;
  font-family: PingFang SC;
  font-weight: 390;
  color: #666666;
}

.stati-title :nth-child(1) {
  font-size: 0.9rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}
.stati-title :nth-child(2) {
  width: 0.5rem;
}

.stati-content:first-child {
  background-color: red;
}

.stati-content-item {
  /* background-color: white ; */
  display: flex;
  padding: 0.5rem 0rem;
  margin: 0.5rem 1rem;
}

.bor {
  border-bottom: 1px solid #e5e5e5;
}

.stati-content-item:first-child {
  font-size: 0.7rem;
  font-family: PingFang SC;
  color: #000000;
}

.stati-content-item > view {
  /* background-color: white ; */
  width: 33.3%;
  text-align: center;
}
</style>